//https://blog.csdn.net/zl1zl2zl3/article/details/81357146
import { PureComponent,Fragment } from 'react';
import {
	Row,
	Col,
	Form,
	Input,
	Select,
	Button,
	Modal,
  Table,
} from 'antd';
import { exportWord } from 'mhtml-to-word';//导出命令文件
import styles from './ProPersonSearchList.less';
import commandPhoto from '@/assets/command.png';
import printJS from 'print-js';

//查看命令
class CommandModal extends PureComponent {
	static defaultProps = {
		handleModalVisibleByPoliceSave: () => {},
		values: {},
	};

	constructor(props) {
		super(props);

		this.state = {
        modalVisibleByCommandFile: false
		};

	}


  columnsByCommand = [
        {
          title: '命令标题',
          dataIndex: 'command_title',
          key: 'command_title',
        }, 	{
          title: '命令号',
          dataIndex: 'command_num',
          key: 'command_num',
        },  {
          title: '命令单位',
          dataIndex: 'command_unit',
          key: 'command_unit',
        },  {
          title: '变动警衔',
          dataIndex: 'command_change',
          key: 'command_change',
        },  {
          title: '命令时间',
          dataIndex: 'command_time',
          key: 'command_time',
        },{
          title: '操作',
          fixed:'right',
          align: 'center',
          width: 120,
          render: (text, record) => {
              return (
                <Fragment>
                  <a onClick={() => this.handleModalByCommandFile(true)}>查看命令文件</a>
                </Fragment>
              );
          }
        }
  ];

  handleModalByCommandFile = flag => {
  	this.setState({
  		modalVisibleByCommandFile: !!flag,
  	});
  };

  //打印
  print = () => {
    printJS({
      printable: 'print',
      type: 'html'
    });
  }

  //导出命令文件
  handleExport = () => {
    exportWord({
      filename: "命令文件",
      selector: ".export",
      style:''
    })
  }

	render() {
		const {
			modalVisibleByCommand,
			handleModalVisibleByCommand,
		} = this.props;
		const {
			modalVisibleByCommandFile
		} = this.state;

    const dataByCommand = [
      {
        key: '1',
        command_title: '关于授予陈某同志',
        command_num: '蒙公衔令字〔422〕号',
        command_change: '一级警督',
        command_unit: '内蒙古自治区公安厅',
        command_time: '2019-08-09',
      },
    ];

		return(
    <div>
    <Modal
    width={900}
    centered
    destroyOnClose
    title="命令文件"
    visible={modalVisibleByCommandFile}
    onCancel={()=> this.handleModalByCommandFile()}
    footer={<Button key="back" onClick = {() => this.handleModalByCommandFile()}>取消</Button>}
    >
    <div style={{width: '100%',height: '520px',overflow: 'auto',textAlign: 'center',position: 'relative'}}>,
      <Button type="primary" style={{marginRight: '10px',float: 'right'}} onClick={this.print}>
      打印
      </Button>
      <Button id="doc" type="primary" style={{marginRight: '10px',float: 'right'}} onClick={this.handleExport}>
      导出
      </Button>
      <div style={{clear: 'both'}}>
          <img id="print"  alt="" src={commandPhoto} style={{width: '80%'}}/>
      </div>
    </div>
    </Modal>
			<Modal
    width={900}
    centered
    bodyStyle={{ padding: '20px 40px 20px' }}
    destroyOnClose
    title="命令列表"
    visible={modalVisibleByCommand}
    onCancel={() => handleModalVisibleByCommand(false)}
    footer={<Button key="back" onClick = {() => handleModalVisibleByCommand(false)}>取消</Button>}
>
    <Table columns={this.columnsByCommand} dataSource={dataByCommand}/>
</Modal>
</div>
		);
	}

}

export default CommandModal;
